<template>
  <A @isShow="shadow" />
  <Shadow v-if="data.isShow" />
</template>
<script setup lang="ts">
import { isShallow, reactive, Ref } from 'vue';
import A from './components/A.vue'
import Shadow from './components/Shadow.vue'

let data = reactive<{
  isShow: boolean
}>({
  isShow: false
})

const shadow = () => {
  data.isShow = !data.isShow
}

</script>

<style>
.app,
html,
body {
  height: 100%;
  width: 100%;
}
</style>